<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>2.详聊v-for</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <h3>v-for遍历数组</h3>
      <ul>
        <li v-for="(p,index) in persons" :key="p.id">
          姓名：{{p.name}} , 年龄：{{p.age}} , {{index}}
        </li>
      </ul>
      <hr>

      <h3>v-for遍历对象</h3>
      <ul>
        <li v-for="(value,jian,index) in car" :key="jian">
          {{value}}-{{jian}}-{{index}}
        </li>
      </ul>
      <hr>

      <h3>v-for遍历字符串</h3>
      <ul>
        <li v-for="(char,index) in str" :key="index">
          {{char}} - {{index}}
        </li>
      </ul>
      <hr>

      <h3>v-for遍历指定次数</h3>
      <ul>
        <li v-for="(number,index) in n" :key="number">
          {{number}} - {{index}} 
        </li>
      </ul>
      <hr>

      <h3>v-for很健壮，遍历如下值，均不会报错</h3>
      <h4 v-for="(a,b) in isHot">
        {{a}} - {{b}}
      </h4>
      <h4 v-for="(a,b) in x">
        {{a}} - {{b}}
      </h4>
      <h4 v-for="(a,b) in y">
        {{a}} - {{b}}
      </h4>
      <h4 v-for="(a,b) in z">
        {{a}} - {{b}}
      </h4>
      <h4 v-for="(a,b) in w">
        {{a}} - {{b}}
      </h4>
      <h4 v-for="(a,b) in q">
        {{a}} - {{b}}
      </h4>

    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        data:{
          persons:[
            {id:'tafsdayt02',name:'晶晶',age:19},
            {id:'tafsdayt03',name:'跃哥',age:20},
            {id:'tafsdayt04',name:'强哥',age:60},
            {id:'tafsdayt05',name:'飞哥',age:18},
          ],
          car:{
            brand:'奔驰',
            color:'黑色',
            price:100,
            a:'奔驰'
          },
          str:'hello,atguigu',
          n:10,
          isHot:true,
          x:undefined,
          y:null,
          z:'',
          w:[]
        }
      })
    </script>
  </body>
</html>